import React, { useState, useCallback } from 'react';
import { Card, Slider, InputNumber, Button, Tooltip, Space, Row, Col } from 'antd';
import {
  FireOutlined,
  PercentageOutlined,
  FileTextOutlined,
  ReloadOutlined,
  InfoCircleOutlined
} from '@ant-design/icons';
import { ModelParameters } from '@/types/models';
import './style.css';

interface ParameterPanelProps {
  parameters: ModelParameters;
  onChange: (params: Partial<ModelParameters>) => void;
  maxTokensLimit?: number;
  disabled?: boolean;
  showAdvanced?: boolean;
}

const ParameterPanel: React.FC<ParameterPanelProps> = ({
  parameters,
  onChange,
  maxTokensLimit = 4096,
  disabled = false,
  showAdvanced = false
}) => {
  const [localParams, setLocalParams] = useState<ModelParameters>(parameters);

  const handleParameterChange = useCallback((key: keyof ModelParameters, value: number) => {
    const newParams = { ...localParams, [key]: value };
    setLocalParams(newParams);
    onChange({ [key]: value });
  }, [localParams, onChange]);

  const handleReset = () => {
    const defaultParams: ModelParameters = {
      temperature: 0.7,
      topP: 0.85,
      maxTokens: 1500,
      presencePenalty: 0,
      frequencyPenalty: 0
    };
    setLocalParams(defaultParams);
    onChange(defaultParams);
  };

  return (
    <Card 
      className="parameter-panel"
      title={
        <Space>
          <span>参数设置</span>
          <Tooltip title="调整模型生成参数以获得最佳效果">
            <InfoCircleOutlined />
          </Tooltip>
        </Space>
      }
      extra={
        <Button
          type="text"
          icon={<ReloadOutlined />}
          onClick={handleReset}
          disabled={disabled}
        >
          重置
        </Button>
      }
    >
      <div className="parameter-item">
        <Row align="middle" gutter={16}>
          <Col span={6}>
            <Space>
              <FireOutlined />
              <span>温度</span>
              <Tooltip title="控制输出的随机性。较高的值使输出更有创意，较低的值使输出更确定性">
                <InfoCircleOutlined className="param-info" />
              </Tooltip>
            </Space>
          </Col>
          <Col span={12}>
            <Slider
              min={0}
              max={1}
              step={0.1}
              value={localParams.temperature}
              onChange={(value) => handleParameterChange('temperature', value)}
              disabled={disabled}
              marks={{
                0: '精确',
                0.5: '平衡',
                1: '创意'
              }}
            />
          </Col>
          <Col span={6}>
            <InputNumber
              min={0}
              max={1}
              step={0.1}
              value={localParams.temperature}
              onChange={(value) => handleParameterChange('temperature', value || 0)}
              disabled={disabled}
              style={{ width: '100%' }}
            />
          </Col>
        </Row>
      </div>

      <div className="parameter-item">
        <Row align="middle" gutter={16}>
          <Col span={6}>
            <Space>
              <PercentageOutlined />
              <span>Top-p</span>
              <Tooltip title="核采样参数。控制累积概率质量，较小的值使模型更聚焦">
                <InfoCircleOutlined className="param-info" />
              </Tooltip>
            </Space>
          </Col>
          <Col span={12}>
            <Slider
              min={0}
              max={1}
              step={0.05}
              value={localParams.topP}
              onChange={(value) => handleParameterChange('topP', value)}
              disabled={disabled}
              marks={{
                0: '0',
                0.5: '0.5',
                1: '1'
              }}
            />
          </Col>
          <Col span={6}>
            <InputNumber
              min={0}
              max={1}
              step={0.05}
              value={localParams.topP}
              onChange={(value) => handleParameterChange('topP', value || 0)}
              disabled={disabled}
              style={{ width: '100%' }}
            />
          </Col>
        </Row>
      </div>

      <div className="parameter-item">
        <Row align="middle" gutter={16}>
          <Col span={6}>
            <Space>
              <FileTextOutlined />
              <span>最大Token</span>
              <Tooltip title="控制生成内容的最大长度">
                <InfoCircleOutlined className="param-info" />
              </Tooltip>
            </Space>
          </Col>
          <Col span={12}>
            <Slider
              min={100}
              max={maxTokensLimit}
              step={100}
              value={localParams.maxTokens}
              onChange={(value) => handleParameterChange('maxTokens', value)}
              disabled={disabled}
              marks={{
                100: '100',
                [Math.floor(maxTokensLimit / 2)]: `${Math.floor(maxTokensLimit / 2)}`,
                [maxTokensLimit]: `${maxTokensLimit}`
              }}
            />
          </Col>
          <Col span={6}>
            <InputNumber
              min={100}
              max={maxTokensLimit}
              step={100}
              value={localParams.maxTokens}
              onChange={(value) => handleParameterChange('maxTokens', value || 100)}
              disabled={disabled}
              style={{ width: '100%' }}
            />
          </Col>
        </Row>
      </div>

      {showAdvanced && (
        <>
          <div className="parameter-item">
            <Row align="middle" gutter={16}>
              <Col span={6}>
                <Space>
                  <span>存在惩罚</span>
                  <Tooltip title="降低模型重复相同主题的倾向">
                    <InfoCircleOutlined className="param-info" />
                  </Tooltip>
                </Space>
              </Col>
              <Col span={12}>
                <Slider
                  min={-2}
                  max={2}
                  step={0.1}
                  value={localParams.presencePenalty || 0}
                  onChange={(value) => handleParameterChange('presencePenalty', value)}
                  disabled={disabled}
                  marks={{
                    '-2': '-2',
                    0: '0',
                    2: '2'
                  }}
                />
              </Col>
              <Col span={6}>
                <InputNumber
                  min={-2}
                  max={2}
                  step={0.1}
                  value={localParams.presencePenalty || 0}
                  onChange={(value) => handleParameterChange('presencePenalty', value || 0)}
                  disabled={disabled}
                  style={{ width: '100%' }}
                />
              </Col>
            </Row>
          </div>

          <div className="parameter-item">
            <Row align="middle" gutter={16}>
              <Col span={6}>
                <Space>
                  <span>频率惩罚</span>
                  <Tooltip title="降低模型逐字重复的倾向">
                    <InfoCircleOutlined className="param-info" />
                  </Tooltip>
                </Space>
              </Col>
              <Col span={12}>
                <Slider
                  min={-2}
                  max={2}
                  step={0.1}
                  value={localParams.frequencyPenalty || 0}
                  onChange={(value) => handleParameterChange('frequencyPenalty', value)}
                  disabled={disabled}
                  marks={{
                    '-2': '-2',
                    0: '0',
                    2: '2'
                  }}
                />
              </Col>
              <Col span={6}>
                <InputNumber
                  min={-2}
                  max={2}
                  step={0.1}
                  value={localParams.frequencyPenalty || 0}
                  onChange={(value) => handleParameterChange('frequencyPenalty', value || 0)}
                  disabled={disabled}
                  style={{ width: '100%' }}
                />
              </Col>
            </Row>
          </div>
        </>
      )}

      <div className="parameter-tips">
        <div className="tip-item">
          <strong>温度提示：</strong>
          <span>创意写作建议 0.7-0.9，技术文档建议 0.2-0.4</span>
        </div>
        <div className="tip-item">
          <strong>Token提示：</strong>
          <span>1 token ≈ 0.75个英文单词 ≈ 0.5个中文字符</span>
        </div>
      </div>
    </Card>
  );
};

export default ParameterPanel;